<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500px" height="500px" style="outline: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');

			function draw() {
				console.log(1111);
				ctx.fillStyle = '#000';
				ctx.beginPath();
				ctx.moveTo(100, 100);
				ctx.bezierCurveTo(110, 10, 199, 278, 300, 379);
				ctx.lineTo(400, 100)
				ctx.closePath();
			}

			function circle() {
				console.log(2222);
				ctx.fillStyle = '#000';
				ctx.beginPath();
				ctx.arc(100, 200, 50, 0, Math.PI * 2)
				ctx.closePath();
			}
			function aaa(){
				ctx.beginPath();
				ctx.lineWidth = 5;
				// ctx.strokeStyle = "green";
				ctx.moveTo(0,0);           /*开始坐标*/
				ctx.lineTo(100,150)           /*开始坐标*/
				ctx.stroke();
			}
			// draw();
			// ctx.fill()
			circle();
			ctx.fill()
			aaa()
			// var fns = [draw, circle, aaa];
			var fns = [circle, aaa];
			canvas.onmousemove = function(e) {
				var x = e.offsetX,
					y = e.offsetY;
				ctx.clearRect(0, 0, 400, 300)
				for (var i = fns.length; i--;) {
					fns[i]();
					if (ctx.isPointInPath(x, y)) {
						ctx.fillStyle = "#f00"
					} else {
						ctx.fillStyle = "#000"
					}
					console.log(ctx.isPointInStroke(x, y));
					if ( ctx.isPointInStroke(x, y) ) {
						ctx.strokeStyle = "green"
					} else{
						ctx.strokeStyle = "#000"
					}
					ctx.fill()
				}
			}
		</script>
	</body>
</html>
